<template>
  <div>
    <catch-table
      :columns="columns"
      :search-form="[
        {
          type: 'input',
          label: '名称',
          name: 'name'
        },
        {
          type: 'select',
          label: '类型',
          options: [
            {
              value: 1,
              label: '轮播图'
            },
            {
              value: 2,
              label: '友情链接'
            }
          ]
        }
      ]"
      :api="api"
    >
      <!-- dialog -->
      <template #dialog="row">
        <Create :primary="row?.id" :api="api" />
      </template>
    </catch-table>
  </div>
</template>

<script lang="ts" setup>
import Create from './create.vue'
const api = 'cms/resource'

const columns = [
  {
    type: 'selection'
  },
  {
    label: 'ID',
    prop: 'id',
    width: 80
  },
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '内容',
    prop: 'content',
    image: true,
    preview: true,
    filter: (value: any) => {
      return [value]
    }
  },
  {
    label: '链接',
    prop: 'url',
    link: true
  },
  {
    label: '类型',
    prop: 'type',
    tags: ['danger', 'info', 'success'],
    filter: (value: number) => {
      return value === 1 ? '轮播图' : value === 2 ? '友情链接' : '广告'
    }
  },
  {
    type: '可见性',
    prop: 'is_visible',
    switch: true
  },
  {
    type: 'operate',
    label: '操作'
  }
]
</script>
